<template>
  <div class="content">
    <!--分类-->
    <div class="edu-filter-box">
      <div class="category2-box">
        <div data-v-5b181bf1="" class="box">
          <div class="first-item">分类：</div>
          <div class="item-box">
            <div :class="['item',{'active':!categoryId}]" @click="changeCategoryId('')"> 全部</div>
            <div :class="['item',{'active':categoryId===item.id}]"  v-for="(item,index) in categoryList" :key="index" @click="changeCategoryId(item.id)"> {{item.name}}</div>
          </div>
        </div>
      </div>
    </div>

    <!--  内容-->
    <div class="contanier">
      <div class="left-contanier">

        <div class="topic-item" v-for="(item,index) in articleList" :key="index" @click="goInfo(item.id)">
          <div class="topic-item-comp">
            <div class="topic-thumb"><img :src="item.coverImage" alt="item.title">
            </div>
            <div class="topic-body">
              <div class="topic-title">{{item.title}}</div>
              <div class="topic-info">
                <div class="category">{{item.categoryName}}</div>
                <span class="read-count">{{item.viewCount}}次阅读</span></div>
            </div>
          </div>
        </div>

      </div>

      <div class="right-contanier">
        <div class="right-list">
          <div class="tit">
            热门文章
          </div>
          <div class="right-box">
            <div class="topic-item" v-for="(item,index) in hotArticle" :key="'h-'+index" @click="goInfo(item.id)">
              <div class="topic-item-comp">
                <div class="topic-thumb"><img :src="item.coverImage" alt="item.title">
                </div>
                <div class="topic-body">
                  <div class="topic-title">{{item.title}}</div>
                  <div class="topic-info">
                    <div class="category">{{item.categoryName}}</div>
                    <span class="read-count">{{item.viewCount}}次阅读</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="paging">
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        background
        style="padding: 30px 0; text-align: center;"
        layout="prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import articleApi from "@/api/articleApi";

  export default {
    data() {
      return {
        page:1,
        limit:10,
        articleList: [],
        total:0,
        categoryId:'',
        categoryList:[],
        hotArticle:[]
      }
    },
    mounted() {
      this.getData()
    }
    , methods: {
      getData() {
        articleApi.getPageList(this.page, this.limit,this.categoryId).then(response => {
          this.articleList = response.list
          this.total = response.totalCount
          this.categoryList=response.categoryList
          //根据浏览量获取热门文章
          if(!this.categoryId){
            this.hotArticle=response.list.sort((a,b)=>{
              return b.viewCount-a.viewCount
            }).slice(0,2)
          }
        })
      },
      //修改分类
      changeCategoryId(id){
        this.categoryId=id
        this.getData()
      },
      goInfo(id){

        this.$router.replace('/article/'+id)
      }
    }
  }
</script>
<style scoped>


</style>
